<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>霓虹灯文字效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #0a0a0a;
        font-family: 'Arial', sans-serif;
        gap: 80px;
        padding: 40px;
      }

      .neon-text-1 {
        font-size: 80px;
        font-weight: bold;
        color: #fff;
        text-shadow: 
          0 0 10px #0ff,
          0 0 20px #0ff,
          0 0 30px #0ff,
          0 0 40px #0ff;
        animation: neon-flicker 2s infinite alternate;
      }

      @keyframes neon-flicker {
        0%, 100% {
          text-shadow: 
            0 0 10px #0ff,
            0 0 20px #0ff,
            0 0 30px #0ff,
            0 0 40px #0ff;
        }
        50% {
          text-shadow: 
            0 0 5px #0ff,
            0 0 10px #0ff,
            0 0 15px #0ff,
            0 0 20px #0ff;
        }
      }

      .neon-text-2 {
        font-size: 80px;
        font-weight: bold;
        color: #fff;
        text-shadow: 
          0 0 10px #ff00ff,
          0 0 20px #ff00ff,
          0 0 30px #ff00ff,
          0 0 40px #ff00ff,
          0 0 70px #ff00ff;
        animation: neon-pulse 1.5s ease-in-out infinite alternate;
      }

      @keyframes neon-pulse {
        from {
          text-shadow: 
            0 0 10px #ff00ff,
            0 0 20px #ff00ff,
            0 0 30px #ff00ff,
            0 0 40px #ff00ff,
            0 0 70px #ff00ff;
        }
        to {
          text-shadow: 
            0 0 20px #ff00ff,
            0 0 30px #ff00ff,
            0 0 40px #ff00ff,
            0 0 50px #ff00ff,
            0 0 80px #ff00ff,
            0 0 100px #ff00ff;
        }
      }

      .neon-text-3 {
        font-size: 80px;
        font-weight: bold;
        color: #00ff00;
        text-shadow: 
          0 0 10px #00ff00,
          0 0 20px #00ff00,
          0 0 30px #00ff00,
          0 0 40px #00ff00,
          0 0 70px #00ff00,
          0 0 80px #00ff00;
        animation: neon-green 2s ease-in-out infinite;
      }

      @keyframes neon-green {
        0%, 100% {
          text-shadow: 
            0 0 10px #00ff00,
            0 0 20px #00ff00,
            0 0 30px #00ff00,
            0 0 40px #00ff00,
            0 0 70px #00ff00,
            0 0 80px #00ff00;
        }
        50% {
          text-shadow: 
            0 0 5px #00ff00,
            0 0 10px #00ff00,
            0 0 15px #00ff00,
            0 0 20px #00ff00,
            0 0 35px #00ff00,
            0 0 40px #00ff00;
        }
      }

      .neon-text-4 {
        font-size: 80px;
        font-weight: bold;
        color: #fff;
        text-shadow: 
          0 0 10px #ff6b6b,
          0 0 20px #ff6b6b,
          0 0 30px #ff6b6b,
          0 0 40px #ff6b6b,
          0 0 70px #ff6b6b,
          0 0 80px #ff6b6b,
          0 0 100px #ff6b6b;
      }
    </style>
  </head>
  <body>
    <h1 class="neon-text-1">CYAN</h1>
    <h1 class="neon-text-2">MAGENTA</h1>
    <h1 class="neon-text-3">GREEN</h1>
    <h1 class="neon-text-4">RED</h1>
  </body>
</html>

